<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="cont">
      <div
        id="carouselExampleCaptions"
        class="carousel slide"
        data-ride="carousel"
      >
        <ol class="carousel-indicators">
          <li
            data-target="#carouselExampleCaptions"
            data-slide-to="0"
            class="active"
          ></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active" >
            <img
              src="../../public/img/bg1.jpg"
              class="d-block w-100"
              alt="..."
            />
            <div class="carousel-caption d-none d-md-block">
              <h5 class="animated fadeInLeftBig">立体山峰陶瓷花瓶 </h5>
              <p class="animated fadeInRightBig">
             以摺纸艺术为灵感,宛如山峰般群聚林立，点缀著冉冉绿意
              </p>
            </div>
          </div>
          <div class="carousel-item">
            <img
              src="../../public/img/bg3.jpg"
              class="d-block w-100"
              alt="..."
            />
            <div class="carousel-caption d-none d-md-block">
              <h5 class="animated bounceInLeft">立式小台钟</h5>
              <p class="animated bounceInRight">黄铜刻度与金属框搭配创意简约钟表闹钟钟表 长摆-典雅黑</p>
            </div>
          </div>
           <div class="carousel-item">
            <img
              src="../../public/img/bg2.jpg"
              class="d-block w-100"
              alt="..."
            />
            <div class="carousel-caption d-none d-md-block">
              <h5 class="animated fadeInLeftBig">mono静音小时钟</h5>
              <p class="animated fadeInRightBig">
               设计低调，丰富任何现代室内空间，引人注目却又不显得突兀。
              </p>
            </div>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselExampleCaptions"
          role="button"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"
            ><img
              src="../../public/img/ljt.png"
              alt=""
              width="40px"
              height="40px"
          /></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselExampleCaptions"
          role="button"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"
            ><img
              src="../../public/img/rjt.png"
              alt=""
              width="40px"
              height="40px"
          /></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

      <!-- 轮播图 结束------------------- -->
    </div>

    <!-- 特色商品介绍 -->

    <div class="cont">
      <div class="cont-row">
        <div class="row-p" v-for="(item, index) in sort" :key="index">
          <img :src="item.path" alt="" />
          <div class="row-t">
            <h2 class="animated fadeInDownBig">{{ item.h2 }}</h2>
            <p class="animated fadeInUpBig">{{ item.p }}</p>
            <h3>
              <a  href=""> {{ item.h3 }}</a>
            </h3>
          </div>
        </div>
        <!-- <div><img src="../../public/img/b1.jpg" alt=""></div>
        <div><img src="../../public/img/b1.jpg" alt=""></div> -->
      </div>
    </div>

    <!-- 中间商品切换列 -->

    <div class="tb-hd">
      <ul>
        <li
          v-for="(item, index) in shopname"
          :key="index"
          @click="isshow0(index)"
        >
          <a
            @click="isactive(index)"
            v-bind:class="{ active1: isActive == index }"
            href="javascript:;"
            >{{ item.path }}</a
          >
        </li>
      </ul>
    </div>

    <!-- 商品列   畅销产品-->
    <div class="product">
      <ul id="target_1" v-show="isshow == 0">
        <li  v-for="(item, index) in bestSeller" :key="index" >
          <div class="sppic">
            <img :src="item.path" alt="" width="266px" height="266px" />
            <div class="hide">
              <div @click="det(item.name, item.newpce, item.path)">
                <router-link to="/detail"
                  ><img
                    src="../../public/img/scp.png"
                    alt=""
                    width="26px"
                    height="26px"
                /></router-link>
              </div>
              <div>
                <a
                  href="javascript:"
                  @click="addcar(index)"
                  data-toggle="modal"
                  data-target="#exampleModal"
                  ><img
                    src="../../public/img/car.png"
                    alt=""
                    width="26px"
                    height="26px"
                /></a>
              </div>
            </div>
          </div>

          <h4 class="font">{{ item.name }}</h4>
          <div>
            <span>￥{{ item.oldpce }}</span
            ><span>￥{{ item.newpce }}</span>
          </div>
        </li>
      </ul>

      <!-- 新品发售
------------------------------------------------- -->
      <ul class="sp" id="target_2" v-show="isshow == 1">
        <li v-for="(item, index) in newProduct" :key="index">
          <div class="sppic">
            <img :src="item.path" alt="" width="266px" height="266px" />
            <div class="hide">
              <div>
                <a href=""
                  ><img
                    src="../../public/img/scp.png"
                    alt=""
                    width="26px"
                    height="26px"
                /></a>
              </div>
              <div>
                <a href=""
                  ><img
                    src="../../public/img/car.png"
                    alt=""
                    width="26px"
                    height="26px"
                /></a>
              </div>
            </div>
          </div>

          <h4>{{ item.name }}</h4>
          <div>
            <span>{{ item.oldpce }}</span
            ><span>{{ item.newpce }}</span>
          </div>
        </li>
      </ul>

      <!-- 高评分商品 -->
      <!-- ------------------------------------------ -->

      <ul class="sp" id="target_3" v-show="isshow == 2">
        <li v-for="(item, index) in praise" :key="index">
          <div class="sppic">
            <img :src="item.path" alt="" width="266px" height="266px" />
            <div class="hide">
              <div>
                <a href=""
                  ><img
                    src="../../public/img/scp.png"
                    alt=""
                    width="26px"
                    height="26px"
                /></a>
              </div>
              <div>
                <a href=""
                  ><img
                    src="../../public/img/car.png"
                    alt=""
                    width="26px"
                    height="26px"
                /></a>
              </div>
            </div>
          </div>

          <h4>{{ item.name }}</h4>
          <div>
            <span>{{ item.oldpce }}</span
            ><span>{{ item.newpce }}</span>
          </div>
        </li>
      </ul>
    </div>

    <!-- 中间大背景图 -->
    <div class="inner">
      <div class="inner-t">
        <h5>庆祝日间促销！</h5>
        <h2>节省25％的所有 项目收藏</h2>
        <p><a href="">现在去购物</a></p>
      </div>
    </div>

    <!-- 特色打折商品 -->

    <div class="sp-bt">
      <h3 >特色产品</h3>
    </div>

    <!-- <li v-for="(item,index) in pic" :key="index">
    <div>
      <img :src="item.path" alt="">
    </div>
  </li> -->

    <div class="sp-sp">
      <ul>
        <li v-for="(item, index) in features" :key="index">
          <div class="box">
            <img :src="item.path" alt="" />
            <div>
              <p>{{item.name}}</p>
              <p>￥{{item.newpce}}</p>
              <a href="javascript:void(0);" @click="det(item.name,item.newpce,item.path)"><button>GO</button></a>
            </div>
          </div>
        </li>
        <!-- <li><div><img src="../../public/img/sp.jpg" alt=""></div></li>
        <li><div><img src="../../public/img/sp.jpg" alt=""></div></li>
        <li><div><img src="../../public/img/sp.jpg" alt=""></div></li>
        <li><div><img src="../../public/img/sp.jpg" alt=""></div></li>
        <li><div><img src="../../public/img/sp.jpg" alt=""></div></li> -->
      </ul>
    </div>

    <!-- 分割图片 -->
    <div class="img">
      <div class="img-left">
        <div class="img_text">
          <p>天天让利</p>
          <h5>新品大促销</h5>
          <p>我们在这等着你！</p>
        </div>
        <img src="../../public/img/i1.jpg" alt="" />
      </div>
      <div class="img-right">
        <div class="img_text">
          <p>开始定制你的款式</p>
          <h5>最全的款式</h5>
          <p>开始你的全新购物方式</p>
          <p><a href="">现在开始</a></p>
        </div>
        <img
          src="../../public/img/i2.jpg"
          alt=""
          width="600px"
          height="268px"
        />
      </div>
    </div>

    <div class="sp-bt">
      <h3>我们的优势</h3>
    </div>

    <div class="wrap" id="wrap">
      <div class="b-row">
        <div v-for="(item, index) in advantage" :key="index">
          <img :src="item.path" alt="" />
          <p>{{ item.date }}</p>
          <h4>{{ item.h4 }}</h4>
          <h5>{{ item.h5 }}</h5>

          <p><a href="">查看更多</a></p>
        </div>
      </div>
    </div>

    <div class="last">
      <h4>环境展示</h4>
    </div>
    <div class="f-p">
      <div v-for="(item, index) in showOff" :key="index">
        <img :src="item.path" />
      </div>
    </div>

    <!-- 模态框---------------------------------- -->

    <!-- Modal -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="left">
              <div>
                <img
                  :src="this.mod[0].path"
                  alt=""
                  width="270px"
                  height="270px"
                />
              </div>
              <div class="mini">
                <span v-for="(item, index) in mini" :key="index" v-bind:class='{active5:isActive4 == index}' @click="modPic(index)">
                  <img
                    :src="item.path"
                    alt=""
                    width="80px"
                    height="80px"
                  />
                </span>
                <!-- <span
                  ><img
                    :src="this.mod[0].path"
                    alt=""
                    width="80px"
                    height="80px"
                  />
                </span>
                <span
                  ><img
                    :src="this.mod[0].path"
                    alt=""
                    width="80px"
                    height="80px"
                  />
                </span> -->
              </div>
            </div>
            <div class="right">
              <p class="name">商品名称: {{ this.mod[0].name }}</p>
              <p class="price">价格: ￥{{ this.mod[0].price }}</p>
              <p class="color">颜色: 白色/黑色/棕色</p>
              <p class="color_cube">
                <span v-for="(item, index) in color" :key="index" v-bind:class='{active3:isActive2 == index}' @click="modColor(index)"></span>
              </p>
              <p class="size">尺寸</p>
              <p class="size_cube">
                <span v-for="(item, index) in size" :key="index" v-bind:class='{active4:isActive3 == index}' @click="modSize(index)"> {{
                  item.text
                }}</span>
              </p>

              <p class="btn">
                <span class="btn_c" data-dismiss="modal" @click="add"
                  >加入购物车</span
                >
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="ai">加入购物车成功！</div>


  </div>
</template>



<style scoped lang="less" >

#ai {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  position: fixed;
  left: 50%;
  margin-left: -150px;
  top: 100px;
  z-index: 99999;
  background-color: #7f87ab;
  display: none;
  border-radius: 3px;
}
.last {
  text-align: center;
  h4 {
    position: relative;
    margin-bottom: 50px;
    &::after {
      position: absolute;
      content: "";
      width: 70px;
      border-bottom: 4px solid #7f87ab;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
.home {
  width: 100%;
  .cont {
    margin: auto;
    margin-top: 20px;
    width: 1200px;
  }
  .cont-row {
    display: flex;

    justify-content: space-between;
    .row-p {
      position: relative;
    }
    .row-t {
      position: absolute;
      top: 80px;
      left: 25px;
      h2 {
        margin: 0;
        font-size: 28px;
      }
      p {
        margin-top: 10px;
        font-size: 16px;
        font-family: sans-serif;
        width: 80px;
        word-wrap: break-word;
        margin-bottom: 0;
      }
      h3 {
        cursor: pointer;
        a {
          text-decoration: none;
          color: #000;
          font-size: 26px;
          transition: all linear 0.2s;
          &:hover {
            font-size: 28px;
          }
        }
      }
    }
  }

  .tb-hd {
    margin-top: 70px;
    ul {
      text-align: center;
      li {
        display: inline-block;

        a {
          margin: 0 25px;
          font-family: "Jost";
          text-decoration: none;
          font-weight: 400;

          color: inherit;
          transition: all linear 0.2s;
          border-bottom: rgba(127, 135, 171, 0) 1px solid;

          border-radius: 0;
          padding-bottom: 15px;
          &:hover {
            border-bottom: rgba(127, 135, 171, 1) 1px solid;
            color: #7f87ab;
          }
        }
      }
    }
  }

  .product {
    width: 1200px;
    margin: auto;
    margin-top: 30px;

    h4 {
      text-align: center;
      font-size: 24px;
    }
    div {
      text-align: center;
    }
    span {
      color: rgba(102, 102, 102, 0.7);
      text-decoration: line-through;
    }

    span:last-child {
      margin-left: 5px;
      color: #000;
      text-decoration: none;
    }

    ul {
      width: 1200px;
      height: 800px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        cursor: pointer;
            &:hover {
            .hide {
              opacity: 1;
              visibility: visible;
              top: 30%;
            }
          }
        position: relative;
        list-style: none;
        width: 270px;
        height: 374px;
        border: 1px solid rgba(102, 102, 102, 0.1);
        transition: all linear 0.2s;
        &:hover {
          z-index: 2;
          -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
          -webkit-transform: translate3d(0, -2px, 0);
          transform: translate3d(0, -2px, 0);
          border: 1px solid rgba(102, 102, 102, 0);
        }
        .sppic {
           
        }
 
        .hide {
          width: 120px;
          height: 46px;
          border-radius: 30px;
          background-color: #7f87ab;
          position: absolute;
          top: 20%;
          left: 50%;
          margin-left: -60px;
          cursor: pointer;
          transition: all linear 0.3s;
          visibility: hidden;
          opacity: 0;
          div {
            width: 60px;
            display: inline-block;
            line-height: 40px;
            vertical-align: top;
          }
        }
      }
    }
  }
  .inner {
    width: 100%;
    height: 555px;
    background-image: url("../../public/img/inner.jpg");
    background-size: cover;
    position: relative;
    .inner-t {
      position: absolute;
      top: 38%;
      left: 20%;
      h2 {
        width: 300px;
        word-wrap: break-word;
      }
    }
  }
  .sp-bt {
    margin: auto;
    text-align: center;
    margin-top: 60px;

    h3 {
      position: absolute;
      left: 50%;
      margin-left: -45px;
      &:after {
        position: absolute;
        content: "";
        width: 70px;
        border-bottom: 4px solid #7f87ab;
        bottom: -15px;
        left: 50%;

        transform: translateX(-50%);
      }
    }
  }
  .sp-sp {
    width: 1200px;
    margin: auto;
    ul {
      width: 1200px;
      display: flex;
      margin-top: 170px;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        list-style: none;
        margin-bottom: 30px;

        .box {
          width: 370px;
          height: 144px;
          border: rgba(102, 102, 102, 0.1) 1px solid;
          transition: all linear 0.2s;
          position: relative;
          img {
            cursor: pointer;
          }
          div {
            position: absolute;
            text-align: right;
            right: 50px;
            top: 4px;
            button {
              padding: 5px 15px;
              min-width: 103px;
              height: 36px;
              background-color: #7f87ab;
              font-size: 13px;
              border-radius: 30px;
              border: none;
              transition: all linear 0.2s;
              cursor: pointer;
              color: #fff;

              &:hover {
                background-color: #000;
              }
            }
            p {
              margin: 10px 0;
            }
          }
          &:hover {
            z-index: 2;
            -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            -webkit-transform: translate3d(0, -2px, 0);
            transform: translate3d(0, -2px, 0);
          }
          img {
            width: 140px;
          }
        }
      }
    }
  }
  .img {
    width: 1200px;
    margin: auto;
    height: 270px;
    .img_text {
      position: absolute;
      left: 20px;
      top: 60px;
      p:first-child {
        color: #7f87ab;
        font-size: 14px;
        font-weight: 600;
        padding: 0 0 5px;
        margin-bottom: 0;
        text-transform: uppercase;
        font-family: "Jost";
      }
      h5 {
        font-size: 34px;
        line-height: 40px;
        max-width: 200px;
        margin-bottom: 19px;
      }
      p:last-child {
        font-size: 16px;
        line-height: 22px;
        color: #666;
        display: block;
      }
    }
    .img-right {
      float: right;
      position: relative;
    }
    .img-left {
      float: left;
      position: relative;

      img {
        height: 260px;
      }
    }
  }

  .wrap {
    margin-top: 200px;
    width: 100%;
    height: 700px;

    .b-row {
      width: 1200px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      div {
        h4 {
          font-size: 18px;
        }
        h5 {
          font-size: 16px;
        }
      }
    }
  }
  .f-p {
    display: flex;
    div {
      cursor: pointer;
      position: relative;
      font-size: 0px;
      &:hover::after {
        opacity: 1;
        visibility: visible;

        transform: scale(1);
      }
      &::after {
        position: absolute;
        top: 0px;
        content: "";
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        // visibility: hidden;
        transform: scale(0.3);
        transition: all 0.4s ease 0s;
      }
    }
    img {
      width: 100%;
    }
  }
  // 修改bootstr轮播图样式
  .carousel-caption {
    color: #000;
    right: -376px;
    top: 30%;
  }

  //修改bootstr轮播图样式 底部小点

  .carousel-indicators li {
    background-color: #000;
    opacity: 0.2;
  }
  .carousel-indicators .active {
    opacity: 1;
  }
  .carousel-control-next {
    z-index: 999;
    span {
      background: none;
    }
  }

  .carousel-control-prev {
    z-index: 999;
    span {
      background: none;
    }
  }
}

// 设置活跃类

.active1 {
  border-bottom: #7f87ab 1px solid !important;
  color: #7f87ab !important;
}

//模态框颜色选择
.active3{
    border: #7f87ab 4px solid !important; 
}
//模态框尺寸选择
.active4{
  background-color:  #7f87ab !important;
}
//模态框小图片的切换
.active5{
  border:  #7f87ab solid 1px !important;
}

// =========================模态框
.modal-header {
  padding: 5px 5px;
  border: none;
  .close {
    outline: none;
  }
}

.modal-body {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;
  .left {
    .mini {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      span {
        display: inline-block;
        border: solid #eeeeee 1px;
        cursor: pointer;
      }
    }
  }

  .right {
    margin-right: 20px;
    .name {
      font-size: 22px;
    }
    .price {
      font-size: 22px;
    }
    .color {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .color_cube {
      span:not(:first-child) {
        margin-left: 20px;
      }
      span:nth-child(1) {
        background-color: #fff;
      }
      span:nth-child(2) {
        background-color: #000;
      }
      span:nth-child(3) {
        background-color: #84664d;
      }
      span {
        display: inline-block;
        width: 26px;
        height: 26px;

        border: 1px solid #eeeeee;

        cursor: pointer;
        border-radius: 3px;
      }
    }

    .size {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .size_cube {
      span:not(:first-child) {
        margin-left: 20px;
      }
      span {
        display: inline-block;
        line-height: 26px;
        text-align: center;
        width: 36px;
        height: 30px;

        border: 1px solid #eeeeee;

        cursor: pointer;
        &:hover {
          background-color: #7f87ab;
        }
      }
    }

    .btn {
      margin-top: 28px;
      span {
        display: inline-block;
        width: 150px;
        height: 50px;
        background-color: #7f87ab;
        color: #fff;
        line-height: 50px;
      }
    }
  }
}

.modal-footer {
  border: none;
}

.modal-dialog {
  max-width: 600px;
}




</style>


<script>
import bus from "@/bus.js";
export default {
  data() {
    return {
      origin:0,
      isActive1:true,//轮播第一个
      isActive2:0,//模态框选择颜色控制
      isActive3:0,//模态框选择尺寸控制
      isActive4:0,//模态框选择图片控制
      isActive: 0,
      isshow: 0,
      color: [{ a: "1" }, { a: "2" }, { a: "3" }],

      size: [{ text: "S" }, { text: "M" }, { text: "L" }],

      mini:[{path:null}, {path:null},{path:null}],
      carousel: [
        { "img": "img/bg1.jpg", "text": "新品上市！", "text2": "简约立式床头小闹钟" },
        { "img": "img/bg1.jpg", "text": "新品上市！", "text2": "简约立式床头小闹钟" },
        {"img":"img/bg1.jpg","text":"新品上市！","text2":"简约立式床头小闹钟"},
      ],
      bestSeller: [
        {
          path: "img/sp.jpg",
          path2:'',
          path3:'',
          name: "创意手绘杯子",
          oldpce: "65",
          newpce: "50",
          id: 1,
          num: 1,
        },
        {
          path: "img/sp1.jpg",
            path2:'img/sp1-1.jpg',
          path3:'img/sp1-2.jpg',
          name: "北欧ins风笔桶",
          oldpce: "65",
          newpce: "50",
          id: 2,
          num: 1,
        },
        {
          path: "img/sp2.jpg",
            path2:'',
          path3:'',
          name: "沙发椅",
          oldpce: "65",
          newpce: "50",
          id: 3,
          num: 1,
        },
        {
          path: "img/sp3.jpg",
            path2:'',
          path3:'',
          name: "罗福宾士透明桌子",
          oldpce: "65",
          newpce: "50",
          id: 4,
          num: 1,
        },
        {
          path: "img/sp4.jpg",
            path2:'',
          path3:'',
          name: "无叶风扇",
          oldpce: " 65",
          newpce: "50",
          id: 5,
          num: 1,
        },
        {
          path: "img/sp5.jpg",
            path2:'',
          path3:'',
          name: "意式轻奢吧椅",
          oldpce: "65",
          newpce: "50",
          id: 6,
          num: 1,
        },
        {
          path: "img/sp6.jpg",
            path2:'',
          path3:'',
          name: "简约风花盆",
          oldpce: "65",
          newpce: "50",
          id: 7,
          num: 1,
        },
        {
          path: "img/sp7.jpg",
            path2:'',
          path3:'',
          name: "镂空小座椅",
          oldpce: "65",
          newpce: "50",
          id: 8,
          num: 1,
        },
      ],
     sort: [
        {
          path: "img/b1.jpg",
          h2: "热门畅销",
          p: "立刻查看我们的畅销产品",
          h3: "GO",
        },
        {
          path: "img/b2.jpg",
          h2: "特别活动",
          p: "最低5折起！",
          h3: "GO",
        },
        {
          path: "img/b3.jpg",
          h2: "最新发售",
          p: "全新产品已经上线！",
          h3: "GO",
        },
      ],

      features: [
        { path: "img/sp.jpg" ,name:"创意手绘杯子",newpce:138},
        { path: "img/sp1.jpg"  ,name:"北欧ins风笔桶",newpce:128},
        { path: "img/sp2.jpg"  ,name:"沙发椅",newpce:128},
        { path: "img/sp3.jpg"  ,name:"罗福宾士透明桌子",newpce:1228},
        { path: "img/sp4.jpg"  ,name:"无页风扇",newpce:128},
        { path: "img/sp5.jpg" ,name:"意式轻奢吧椅",newpce:128 },
      ],
     newProduct: [
        { path: "img/sp-1.jpg",name:'镂空座椅',oldpce:'99',newpce:'80'},
        { path: "img/sp-2.jpg" },
        { path: "img/sp-3.jpg" },
        { path: "img/sp-4.jpg" },
        { path: "img/sp-5.jpg" },
        { path: "img/sp-6.jpg" },
        { path: "img/sp-7.jpg" },
        { path: "img/sp-8.jpg" },
      ],
     praise: [
        { path: "img/sp1.jpg" },
        { path: "img/sp-1.jpg" },
        { path: "img/sp3.jpg" },
        { path: "img/sp-5.jpg" },
        { path: "img/sp6.jpg" },
        { path: "img/sp-3.jpg" },
        { path: "img/sp2.jpg" },
        { path: "img/sp-9.jpg" },
      ],

      shopname: [
        { path: "畅销产品" },
        { path: "新品发售" },
        { path: "高评分商品" },
      ],
      advantage: [
        {
          path: "img/news1.jpg",
          date: "8月27日，上午09:20",
          h4: "我们通过最精致的做工给您带来最好的产品",
          h5: "这是一段随机的文字",
        },
        {
          path: "img/news2.jpg",
          date: "10月27日，下午10:20",
          h4: "我们通过最精致的做工给您带来最好的产品",
          h5: "这是一段随机的文字",
        },
        {
          path: "img/news3.jpg",
          date: "11月27日，下午06:20",
          h4: "我们通过最精致的做工给您带来最好的产品",
          h5: "这是一段随机的文字",
        },
      ],
      showOff: [
        { path: "/img/f1.jpg" },
        { path: "/img/f2.jpg" },
        { path: "/img/f3.jpg" },
        { path: "/img/f4.jpg" },
        { path: "/img/f5.jpg" },
      ],
      mod:[{ id: "", name: "", path: null, price: "23123", count: null }],
    };
  },
  methods: {
    isshow0(index) {
      this.isshow = index;
    },
    isactive(index) {
      this.isActive = index;
    },

     modColor(index) {
      this.isActive2 = index;
    },
     
     modSize(index) {
      this.isActive3 = index;
      if (index==1) {
        this.mod[0].price= parseInt(this.origin*1.2)
      } else if (index==2) {
        this.mod[0].price= parseInt(this.origin*1.3)
      }else{
        this.mod[0].price= this.origin
      }
      

    },
     modPic(index) {
      this.isActive4 = index;
      this.mod[0].path=this.mini[index].path
    },





    det(a, b, c) {
  this.$router.push('/detail')
      setTimeout(() => {
      
         bus.$emit("det", { a, b, c });
      }, 60);


     
    },

    addcar(index) {
        (this.origin=this.bestSeller[index].newpce),
      (this.mod[0].id = this.bestSeller[index].id),
        (this.mod[0].name = this.bestSeller[index].name),
        (this.mod[0].path = this.bestSeller[index].path),
        (this.mod[0].price = this.bestSeller[index].newpce),
        (this.mod[0].count = this.bestSeller[index].num);
        this.mini[0].path=this.bestSeller[index].path;
         this.mini[1].path=this.bestSeller[index].path2;
          this.mini[2].path=this.bestSeller[index].path3;

    },
    add() {
         if (!sessionStorage.getItem("name")) {
           alert('请登入')
           this.$router.push('/login')
         }else{

      var id = this.mod[0].id;
      var name = this.mod[0].name;
      var path = this.mod[0].path;
      var price = this.mod[0].price;
      var count = this.mod[0].count;
      var goods = {
        id: id,
        name: name,
        path: path,
        price: price,
        count: count,
      
      };
    
      goods = JSON.stringify(goods)
       var user = sessionStorage.getItem('name');
       console.log(goods);
         this.$axios
          .post(
            "http://localhost:520/car",
            "name=" + user +"&goods=" + goods
          )
          .then((data) => {
            console.log(data);
            if (data.data.code == "200") {
              
            } else if (data.data.code == "404") {
              alert("网络出现了小波动 请重试");
            }else if(data.data.code == "400"){
              alert('添加失败 请重试')
            }
          });  




      // this.$store.commit("addshop", goods);

      setTimeout(() => {
        $("#ai").fadeIn(500);
      }, 300);
      setTimeout(function () {
        $("#ai").fadeOut(1000); //将DIV标签隐藏。
      }, 1000);
      }
    },




  },

  mounted() {
    bus.$emit("det", "222");
   
      

      //监听滚动条
    window.addEventListener('scroll', this.getHeight)
   
  },
};
</script>       


